<template>
  <view class="content px-2 box-border">
    <view class="custom-search mt-2.5" @click="toSearch">
      <up-input
        color="#000"
        placeholder="搜索关键词"
        :placeholderStyle="{ color: '#BBBBBB', fontSize: '31rpx' }"
        prefixIcon="search"
        prefixIconStyle="font-size: 50rpx;color: #BBBBBB;"
        shape="circle"
        border="surround"
        clearable   
        disabled    
        disabledColor="#ffffff"
      >
        <template #suffix>
          <text class="text-[31rpx] text-[#038afe] mr-[40rpx]" @click="toSearch"
            >搜索</text
          >
        </template>
      </up-input>
    </view>
    <moduleOuterBox
      :moduleTitle="item.itemType"
      :moduleIcon="ylbzIcon"
      v-for="(item, index) in list"
      :key="index"
    >
      <workGuideMenu
        :menuList="item.affairsGuides"
        @onWorkGuideMenuItem="workGuideItemDeatil"
      ></workGuideMenu>
    </moduleOuterBox>
    <up-gap height="16"></up-gap>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script setup lang="ts">
import moduleOuterBox from "@/components/moduleOuterBox/moduleOuterBox.vue";
import workGuideMenu from "@/components/workGuideMenu/workGuideMenu.vue";
import shbzIcon from "@/static/icon/shbz.png";
import ylbzIcon from "@/static/icon/ylbz.png";
import zfbzIcon from "@/static/icon/zfbz.png";
import wfzjlzmIcon from "@/static/icon/wfzjlzm.png";
import jwrydjIcon from "@/static/icon/jwrydj.png";
import yqdjIcon from "@/static/icon/yqdj.png";
import { listWorkGuideGroup } from "@/api/workGuide/index";
import { imgPrefix } from "@/config/app";

const uToastRef = <any>ref(null);
const list = <any>ref([]);
  
// 获取办事指南列表
const getWorkGuideList = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  listWorkGuideGroup({})
    .then((res: any) => {
      uni.hideLoading();
      const { data } = res;
      let arr = data ?? [];
      if (arr.length) {
        list.value = arr.map((item: any) => {
          item.affairsGuides = item.affairsGuides ?? [];
          if (item.affairsGuides.length) {
            item.affairsGuides = item.affairsGuides.map(
              (child: any, index: number) => {
                child.icon = imgPrefix + child.logoUrl;
                child.title = child.itemName;
                if ((index + 1) % 3 === 1) {
                  child.bgOffset0 = "#fef9ec";
                  child.bgOffset1 = "#fffcf7";
                }
                if ((index + 1) % 3 === 2) {
                  child.bgOffset0 = "#F6FFFD";
                  child.bgOffset1 = "#F3FFFB";
                }
                if ((index + 1) % 3 === 0) {
                  child.bgOffset0 = "#ECF5FC";
                  child.bgOffset1 = "#F4F8FB";
                }
                return child;
              }
            );
          }
          return item;
        });
      }
    })
    .catch((err: any) => {
      uni.hideLoading();
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};

const workGuideItemDeatil = (item: any) => {
  uni.navigateTo({
    url: `/subPages/crowd/workGuide/detail?id=${item.id}`,
  });
};
const toSearch = () => {
  uni.navigateTo({ url: "/subPages/crowd/search/index" });
};

onLoad(() => {
  getWorkGuideList();
});
</script>

<style lang="scss" scoped>
.custom-search {
  ::v-deep .u-input {
    background: #fff;
    border: 1rpx solid #bbbbbb;
    padding-right: 0 !important;
  }
}
</style>
